import { FC } from "react";
interface JsonToTableProps {}
const jsonToRevert =
  // File Name: /MyPractice/data.json
  [
    {
      id: 1,
      name: "Akshit",
      city: "Moradabad",
    },
    {
      id: 2,
      name: "Nikita",
      city: "Lucknow",
    },
    {
      id: 3,
      name: "Deeksha",
      city: "Noida",
    },
    {
      id: 4,
      name: "Ritesh",
      city: "Delhi",
    },
    {
      id: 5,
      name: "Somya",
      city: "Gurugram",
    },
    {
      id: 6,
      name: "Eshika",
      city: "Mumbai",
    },
    {
      id: 7,
      name: "Kalpana",
      city: "Rampur",
    },
    {
      id: 8,
      name: "Parul",
      city: "Chandigarh",
    },
    {
      id: 9,
      name: "Himani",
      city: "Dehradun",
    },
  ];

function JsonToTable() {
  const DisplayData = jsonToRevert.map((info) => {
    return (
      <tr>
        <td>{info.id}</td>
        <td>{info.name}</td>
        <td>{info.city}</td>
      </tr>
    );
  });

  return (
    <div>
      <table className="table table-striped">
        <thead>
          <tr>
            <th>Sr.NO</th>
            <th>Name</th>
            <th>City</th>
          </tr>
        </thead>
        <tbody>{DisplayData}</tbody>
      </table>
    </div>
  );
}
export default JsonToTable;
